<template>
  <div class="grade-wrap pad">
    <div class="head">
      <span>Z评分设置</span>
    </div>
    <el-tabs class="m-t-b" type="border-card">
      <el-tab-pane label="年龄别身高">
        <el-button @click="openAAHDialog" type="primary"><i class="el-icon-plus"></i> 添加年龄别身高</el-button>
        <el-table class="m-t-b" stripe :data="ageAndHeights" v-loading="loading1">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' : '女'}}
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="身高(cm)" prop="height"></el-table-column>
          <el-table-column label="年龄别身高Z评分" prop="point"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updateAgeAndHeight(scope.row)" type="default" icon="el-icon-edit" circle></el-button>
              <el-button @click="deleteData('年龄别身高', 1, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="aCurPage"
          @current-change="handlePagi($event, 1)"
          :total="ageAndHeightTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="年龄别体重">
        <el-button @click="openAAWDialog" type="primary"><i class="el-icon-plus"></i> 添加年龄别体重</el-button>
        <el-table class="m-t-b" stripe :data="ageAndWeights" v-loading="loading2">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' : '女'}}
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="体重(kg)" prop="weight"></el-table-column>
          <el-table-column label="年龄别体重Z评分" prop="point"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updateAgeAndWeight(scope.row)" type="default" icon="el-icon-edit" circle></el-button>
              <el-button @click="deleteData('年龄别体重', 2, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="1"
          @current-change="handlePagi($event, 2)"
          :total="ageAndWeightTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="身高别体重">
        <el-button @click="openHAWDialog" type="primary"><i class="el-icon-plus"></i> 添加身高别体重</el-button>
        <el-table class="m-t-b" stripe :data="heightAndWeights" v-loading="loading3">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' : '女'}}
            </template>
          </el-table-column>
          <el-table-column label="身高(cm)" prop="height"></el-table-column>
          <el-table-column label="体重(kg)" prop="weight"></el-table-column>
          <el-table-column label="身高别体重Z评分" prop="point"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updateHeightAndWeight(scope.row)" type="default" icon="el-icon-edit" circle></el-button>
              <el-button @click="deleteData('身高别体重', 3, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="m-t-b flex"
          :page-size="pageSize"
          layout="prev, pager, next"
          :current-page="1"
          @current-change="handlePagi($event, 3)"
          :total="heightAndWeightTotal">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="ageAndHeightDialogTitle" :visible.sync="showAgeAndHeightDialog">
      <el-form :model="ageAndHeight" :rules="rules" ref="ageAndHeight" label-position="top">
        <el-form-item label="性别">
          <el-select v-model="ageAndHeight.gender">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄(请注意选择单位: 周/月)" prop="age">
           <el-input type="number" v-model="ageAndHeight.age">
             <el-select slot="append" style="width: 80px;" v-model="ageType">
               <el-option label="周" :value="1"></el-option>
               <el-option label="月" :value="2"></el-option>
               <el-option label="岁" :value="3"></el-option>
             </el-select>
           </el-input>
        </el-form-item>
        <el-form-item label="身高(cm)">
           <el-input-number v-model="ageAndHeight.height" :min="30" :max="250"></el-input-number>
        </el-form-item>
        <el-form-item label="Z评分" prop="z">
          <el-input type="number" v-model="ageAndHeight.z" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideAAHDialog">取 消</el-button>
        <el-button type="primary" @click="addAAH('ageAndHeight')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="ageAndWeightDialogTitle" :visible.sync="showAgeAndWeightDialog">
      <el-form :model="ageAndWeight" :rules="rules" ref="ageAndWeight" label-position="top">
        <el-form-item label="性别">
          <el-select v-model="ageAndWeight.gender">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
           <el-input type="number" v-model="ageAndWeight.age">
             <el-select slot="append" style="width: 80px;" v-model="ageType">
               <el-option label="周" :value="1"></el-option>
               <el-option label="月" :value="2"></el-option>
               <el-option label="岁" :value="3"></el-option>
             </el-select>
           </el-input>
        </el-form-item>
        <el-form-item label="体重(kg)">
           <el-input-number v-model="ageAndWeight.weight" :min="2.5" :max="400"></el-input-number>
        </el-form-item>
        <el-form-item label="Z评分" prop="z">
          <el-input type="number" v-model="ageAndWeight.z" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideAAWDialog">取 消</el-button>
        <el-button type="primary" @click="addAAW('ageAndWeight')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="heightAndWeightDialogTitle" :visible.sync="showHeightAndWeightDialog">
      <el-form :model="heightAndWeight" :rules="rules" ref="heightAndWeight" label-position="top">
        <el-form-item label="性别">
          <el-select v-model="heightAndWeight.gender">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身高(cm)">
           <el-input-number v-model="heightAndWeight.height" :min="30" :max="250"></el-input-number>
        </el-form-item>
        <el-form-item label="体重(kg)">
           <el-input-number v-model="heightAndWeight.weight" :min="2.5" :max="400"></el-input-number>
        </el-form-item>
        <el-form-item label="Z评分" prop="z">
          <el-input type="number" v-model="heightAndWeight.z" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideHAWDialog">取 消</el-button>
        <el-button type="primary" @click="addHAW('heightAndWeight')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { notifySuccess } from '../util'
import {
  addZPoint,
  updateZPoint,
  deleteZPoint,
  getZPointList
} from '../api'

export default {
  name: 'grade',
  data () {
    const validateAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('年龄不能为空!'))
      } else if (Number(value) < 0 || Number(value) > 100) {
        callback(new Error('年龄须在0 - 100之间'))
      } else {
        callback()
      }
    }
    return {
      ageType: 1,
      aCurPage: 1,
      bCurPage: 1,
      cCurPage: 1,
      ageAndHeightDialogTitle: '添加年龄别身高',
      ageAndWeightDialogTitle: '添加年龄别体重',
      heightAndWeightDialogTitle: '添加身高别体重',
      showAgeAndHeightDialog: false,
      showAgeAndWeightDialog: false,
      showHeightAndWeightDialog: false,
      pageSize: 10,
      ageAndHeightTotal: 0,
      ageAndWeightTotal: 0,
      heightAndWeightTotal: 0,
      ageAndHeights: [],
      loading1: true,
      loading2: true,
      loading3: true,
      ageAndHeight: {
        gender: 1,
        age: '',
        height: '',
        z: ''
      },
      ageAndWeights: [],
      ageAndWeight: {
        gender: 1,
        age: '',
        weight: '',
        z: ''
      },
      heightAndWeights: [],
      heightAndWeight: {
        gender: 1,
        weight: '',
        height: '',
        z: ''
      },
      rules: {
        age: [
          { validator: validateAge, trigger: 'blur' }
        ],
        z: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    updateAgeAndHeight (data) {
      if (!this.$checkAuth('canEditAgeAndHeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      let age = data.age
      this.ageType = age[age.length - 1] === '周' ? 1 : 2
      age = age.slice(0, age.length - 1)
      this.ageAndHeight.gender = data.gender
      this.ageAndHeight.age = age
      this.ageAndHeight.z = data.point
      this.ageAndHeight.height = data.height
      this.ageAndHeight.pointId = data.pointId
      this.ageAndHeightDialogTitle = '修改年龄别身高'
      this.showAgeAndHeightDialog = true
    },
    openAAHDialog () {
      if (!this.$checkAuth('canAddAgeAndHeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.ageAndHeightDialogTitle = '添加年龄别身高';
      this.ageAndHeight.gender = '';
      this.ageAndHeight.age = '';
      this.ageAndHeight.height = '';
      this.ageAndHeight.z = '';
      this.showAgeAndHeightDialog = true;
    },
    hideAAHDialog () {
      this.showAgeAndHeightDialog = false
    },
    addAAH (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let type;
          if (this.ageType === 1) {
            type = '周'
          } else if (this.ageType === 2) {
            type = '月'
          } else {
            type = '岁'
          }
          if (this.ageAndHeightDialogTitle === '修改年龄别身高') {
            updateZPoint({
              pointId: this.ageAndHeight.pointId,
              type: 1,
              gender: this.ageAndHeight.gender,
              age: this.ageAndHeight.age + type,
              height: this.ageAndHeight.height,
              point: this.ageAndHeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showAgeAndHeightDialog = false
                this.fetchZPointList(this.aCurPage, 1)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          } else {
            addZPoint({
              type: 1,
              gender: this.ageAndHeight.gender,
              age: this.ageAndHeight.age + type,
              height: this.ageAndHeight.height,
              point: this.ageAndHeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showAgeAndHeightDialog = false
                this.fetchZPointList(this.aCurPage, 1)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    updateAgeAndWeight (data) {
      if (!this.$checkAuth('canEditAgeAndWeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      let age = data.age
      let type = age[age.length - 1];
      if (type === '周') {
        this.ageType = 1
      } else if (type === '月') {
        this.ageType = 2
      } else {
        this.ageType = 3
      }
      // this.ageType = age[age.length - 1] === '周' ? 1 : 2
      age = age.slice(0, age.length - 1)
      this.ageAndWeight.age = age
      this.ageAndWeight.z = data.point
      this.ageAndWeight.gender = data.gender
      this.ageAndWeight.weight = data.weight
      this.ageAndWeight.pointId = data.pointId
      this.ageAndWeightDialogTitle = '修改年龄别体重'
      this.showAgeAndWeightDialog = true
    },
    hideAAWDialog () {
      this.showAgeAndWeightDialog = false
    },
    addAAW (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let type;
          if (this.ageType === 1) {
            type = '周'
          } else if (this.ageType === 2) {
            type = '月'
          } else {
            type = '岁'
          }
          if (this.ageAndWeightDialogTitle === '修改年龄别体重') {
            updateZPoint({
              pointId: this.ageAndWeight.pointId,
              type: 2,
              gender: this.ageAndWeight.gender,
              age: this.ageAndWeight.age + type,
              weight: this.ageAndWeight.weight,
              point: this.ageAndWeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showAgeAndWeightDialog = false
                this.fetchZPointList(this.bCurPage, 2)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          } else {
            addZPoint({
              type: 2,
              gender: this.ageAndWeight.gender,
              age: this.ageAndWeight.age + type,
              weight: this.ageAndWeight.weight,
              point: this.ageAndWeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showAgeAndWeightDialog = false
                this.fetchZPointList(this.bCurPage, 2)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    openAAWDialog () {
      if (!this.$checkAuth('canAddAgeAndWeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.ageAndWeightDialogTitle = '添加年龄别体重'
      this.ageAndWeight.age = '';
      this.ageAndWeight.gender = '';
      this.ageAndWeight.weight = '';
      this.ageAndWeight.z = '';
      this.showAgeAndWeightDialog = true
    },
    updateHeightAndWeight (data) {
      if (!this.$checkAuth('canEditHeightAndWeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.heightAndWeight.gender = data.gender
      this.heightAndWeight.height = data.height
      this.heightAndWeight.weight = data.weight
      this.heightAndWeight.z = data.point
      this.heightAndWeight.pointId = data.pointId
      this.heightAndWeightDialogTitle = '修改身高别体重'
      this.showHeightAndWeightDialog = true
    },
    openHAWDialog () {
      if (!this.$checkAuth('canAddHeightAndWeight')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.heightAndWeightDialogTitle = '添加身高别体重'
      this.heightAndWeight.gender = '';
      this.heightAndWeight.weight = '';
      this.heightAndWeight.height = '';
      this.heightAndWeight.z = '';
      this.showHeightAndWeightDialog = true
    },
    addHAW (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.heightAndWeightDialogTitle === '修改身高别体重') {
            updateZPoint({
              pointId: this.heightAndWeight.pointId,
              type: 3,
              gender: this.heightAndWeight.gender,
              height: this.heightAndWeight.height,
              weight: this.heightAndWeight.weight,
              point: this.heightAndWeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showHeightAndWeightDialog = false
                this.fetchZPointList(this.cCurPage, 3)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          } else {
            addZPoint({
              type: 3,
              gender: this.heightAndWeight.gender,
              height: this.heightAndWeight.height,
              weight: this.heightAndWeight.weight,
              point: this.heightAndWeight.z
            })
            .then(res => {
              if (res.data.code === 1) {
                notifySuccess(this)
                this.showHeightAndWeightDialog = false
                this.fetchZPointList(this.cCurPage, 3)
              } else {
                this.$message.error(res.data.msg || '网络异常!')
              }
            })
            .catch(e => {
              this.$message.error('网络异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    hideHAWDialog () {
      this.showHeightAndWeightDialog = false
    },
    handlePagi (page, type) {
      if (type === 1) {
        this.aCurPage = page
      } else if (type === 2) {
        this.bCurPage = page
      } else if (type === 3) {
        this.cCurPage = page
      };
      this.fetchZPointList(page, type)
    },
    deleteData (label, type, obj) {
      this.$confirm(`此操作将永久删除该${label}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteZPoint(obj.pointId, type)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    fetchZPointList (index, type) { // 获取z评分设置列表
      if (type === 1) {
        this.loading1 = true
      } else if (type === 2) {
        this.loading2 = true
      } else {
        this.loading3 = true
      }
      getZPointList({
        index,
        count: this.pageSize,
        queryParam: {
          type//类型(1年龄别身高2年龄别体重3身高别体重)
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.list || []
          switch (type) {
            case 1:
              this.ageAndHeightTotal = res.data.data.totalRecord
              this.ageAndHeights = list
              break
            case 2:
              this.ageAndWeightTotal = res.data.data.totalRecord
              this.ageAndWeights = list
              break
            case 3:
              this.heightAndWeightTotal = res.data.data.totalRecord
              this.heightAndWeights = list
              break
            default:
              break
          }
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        if (type === 1) {
          this.loading1 = false
        } else if (type === 2) {
          this.loading2 = false
        } else {
          this.loading3 = false
        }
      })
      .catch(e => {
        if (type === 1) {
          this.loading1 = false
        } else if (type === 2) {
          this.loading2 = false
        } else {
          this.loading3 = false
        }
        this.$message.error('网络异常!')
      })
    },
    handleDeleteZPoint (id, type) {
      deleteZPoint(id)
      .then(res => {
        if (res.data.code === 1) {
          notifySuccess(this)
          switch (type) {
            case 1:
              if (!this.$checkAuth('canDeleteAgeAndHeight')) {
                return this.$message.error('暂无对应操作权限!')
              };
              this.fetchZPointList(this.aCurPage, 1)
              break
            case 2:
              if (!this.$checkAuth('canDeleteAgeAndWeight')) {
                return this.$message.error('暂无对应操作权限!')
              };
              this.fetchZPointList(this.bCurPage, 2)
              break
            case 3:
              if (!this.$checkAuth('canDeleteHeightAndWeight')) {
                return this.$message.error('暂无对应操作权限!')
              };
              this.fetchZPointList(this.cCurPage, 3)
              break
            default:
            break
          }
        } else {
          this.$message.error(res.data.msg || "网络异常!")
        }
      })
      .catch (e => {
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchZPointList(1, 1)
    this.fetchZPointList(1, 2)
    this.fetchZPointList(1, 3)
  }
}
</script>
<style lang="scss">
.grade-wrap {
  table {
    .cell {
      text-align: center;
    }
  }
}
</style>
